<template>
  <div class="min-h-full bg-gradient-to-br from-slate-50 to-slate-200">
    <div class="container mx-auto px-6 py-6">
      <!-- 页面标题区域 -->
      <div class="mb-2">
        <div class="flex items-center justify-between mb-2">
          <h1 class="text-3xl font-bold text-gray-900">成绩分析维度</h1>
          <div class="w-200px">
            <el-select v-model="activeTab" placeholder="请选择分析维度" class="w-48">
              <el-option label="总分排名" value="total-rank">
                <div class="flex items-center">
                  <div class="i-mdi:trophy w-4 h-4 mr-2 text-yellow-500"></div>
                  <span>总分排名</span>
                </div>
              </el-option>
              <el-option label="各科目排名" value="subject-rank">
                <div class="flex items-center">
                  <div class="i-mdi:book-open-page-variant w-4 h-4 mr-2 text-green-500"></div>
                  <span>各科目排名</span>
                </div>
              </el-option>
              <el-option label="成绩弱项分析" value="stability">
                <div class="flex items-center">
                  <div class="i-mdi:chart-line w-4 h-4 mr-2 text-blue-500"></div>
                  <span>成绩弱项分析</span>
                </div>
              </el-option>
              <el-option label="成绩趋势分析" value="trend">
                <div class="flex items-center">
                  <div class="i-mdi:trending-up w-4 h-4 mr-2 text-purple-500"></div>
                  <span>成绩趋势分析</span>
                </div>
              </el-option>
              <el-option label="历史成绩查看" value="history">
                <div class="flex items-center">
                  <div class="i-mdi:history w-4 h-4 mr-2 text-red-500"></div>
                  <span>历史成绩查看</span>
                </div>
              </el-option>
            </el-select>
          </div>
        </div>
        <p class="text-gray-600">深入分析您的成绩数据，发现学习规律</p>
      </div>

      <!-- 内容区域 -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <!-- 总分排名 -->
        <TotalRankAnalysis v-if="activeTab === 'total-rank'" />

        <!-- 各科目排名 -->
        <div v-else-if="activeTab === 'subject-rank'" class="text-center py-16">
          <div class="i-mdi:book-open-page-variant text-5xl mb-4 mx-auto text-green-500"></div>
          <h3 class="text-xl font-semibold text-gray-800 mb-3">各科目排名</h3>
          <p class="text-gray-500 mb-2">功能开发中...</p>
          <p class="text-sm text-gray-400">展示各科目的详细排名情况和对比分析</p>
        </div>

        <!-- 成绩弱项分析 -->
        <WeaknessAnalysis v-else-if="activeTab === 'stability'" />

        <!-- 成绩趋势分析 -->
        <div v-else-if="activeTab === 'trend'" class="text-center py-16">
          <div class="i-mdi:trending-up text-5xl mb-4 mx-auto text-purple-500"></div>
          <h3 class="text-xl font-semibold text-gray-800 mb-3">成绩趋势分析</h3>
          <p class="text-gray-500 mb-2">功能开发中...</p>
          <p class="text-sm text-gray-400">展示成绩变化趋势，预测未来表现</p>
        </div>

        <!-- 历史成绩查看 -->
        <div v-else-if="activeTab === 'history'" class="text-center py-16">
          <div class="i-mdi:history text-5xl mb-4 mx-auto text-red-500"></div>
          <h3 class="text-xl font-semibold text-gray-800 mb-3">历史成绩查看</h3>
          <p class="text-gray-500 mb-2">功能开发中...</p>
          <p class="text-sm text-gray-400">查看历史考试成绩记录和详细分析</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TotalRankAnalysis from '@/components/business/TotalRankAnalysis.vue'
import WeaknessAnalysis from '@/components/business/WeaknessAnalysis.vue'

// 当前激活的Tab
const activeTab = ref('total-rank')
</script>

<style lang="scss" scoped>
// 页面样式
</style> 